<template>
    <div>


    <el-table :data="userList" style="width: 100%" @cell-mouse-enter="enterSelectionRows">
     
 
      <el-table-column prop="name" label="姓名" :formatter="killname"  >
      </el-table-column>


      <el-table-column prop="idCard" label="身份证号" :formatter="killidCard">
      </el-table-column>
      <el-table-column  prop="telNum"  label="电话号" :formatter="killtelNum">
      </el-table-column>

      <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
            
          </template>
        </el-table-column>
    </el-table>
    <div id="mybutton">
    <el-button type="primary" @click="back">返回首页</el-button>
    <el-button type="primary" @click="toadd">添加数据</el-button>

     <!-- 修改用户的对话框 -->
     <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name" ></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input v-model="editForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="telNum">
          <el-input v-model="editForm.telNum" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>

     </div>
   
<input type="text" value="" style="width:auto" id="information">

  </div>
</template>
<script>
export default {
    data(){

        return{
            userList:[
                 

            ],
            visible: false
            ,
              // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // 修改之时查询到的用户信息对象
      editForm: {



      },
        // 修改表单的验证规则对象
        editFormRules: {
          name:[
            { required: true, message: '请输入姓名', trigger: 'blur' }

            ]

            ,
          telNum: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 11, max: 11, message: '请输入正确长度的手机号码', trigger: 'blur' },
            {pattern: /^(13[0-9]|14[1|4|5|6|7|8|9]|15[0|1|2|3|5|6|7|8|9]|17[2|3|5|6|7|8]|18[0-9]|19[1|8|9])\d{8}$/,
            message: '请输入正确格式的手机号码',trigger: 'blur'
        }
          ],
          idCard:[
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 18, max: 18, message: '请输入正确长度的身份证号', trigger: 'blur' },
          {pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: '请输入正确格式的身份证号',trigger: 'blur'
        }
          ]
      }
           

        }
       
    },
    created(){
        this.checkUserList();



    }
    ,
    methods:{

       // 监听修改用户对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
     toadd(){
        this.$router.push('/add');

     }
        ,
       back(){
        this.$router.push('/login');

      },
       async checkUserList(){
         const myUserList=   await  this.$http.post("/users/checkAllUsers");
         this.userList=myUserList.data.data

       }
    ,
      //格式化姓名是也，将姓名后两个字隐藏
      killname(row, column, cellValue, index){
        
        const start=new Array(cellValue.length).join("*");
        const end=cellValue.slice(-1);

        return `${start}${end}`;
      },
      //格式化身份证是也，前三位和最后一位显示，其他全部为*
      killidCard(row, column, cellValue, index){
        const start=cellValue.slice(0,3);
        const middle=new Array(cellValue.length-5).join("*");
        const end=cellValue.slice(-1);

        return `${start}${middle}${end}`;
      }
,//格式化电话号码是也，只显示后四位
     killtelNum(row, column, cellValue, index){
        
        const start=new Array(cellValue.length-4).join("*");
        const end=cellValue.slice(7,10);

        return `${start}${end}`;
      },
      //点击的时候显示真实的信息
      enterSelectionRows(row, column,cellValue,killname){
        //反格式化姓名
      if (column.property == 'name') {
        console.log(row.name);
        document.getElementById("information").value=row.name;
      };
       //反格式化电话号
       if (column.property == 'telNum') {
        console.log(row.telNum);
        document.getElementById("information").value=row.telNum;
      };
       //反格式化身份证号
       if (column.property == 'idCard') {
        console.log(row.idCard);
        document.getElementById("information").value=row.idCard;
      }

    },

// 展示编辑用户的对话框
    async showEditDialog(id) {
      // console.log(id)
      const data = await this.$http.post('/users/checkOne',{id:id})

      alert(data.data.code );
      if (data.data.code == '200') {
        this.editForm = data.data.data;
      this.editDialogVisible = true
      }else{
        return this.$message.error('更新用户信息失败！')

      }
    
    },
     // 修改用户信息并提交
    editUserInfo() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid){
          alert("修改之内容不符合规范，请重新编辑");
          return;
        } 
        // 发起修改用户信息的数据请求
        const { data: res } = await this.$http.post(
          '/users/updateUsers' ,
          {
            id:this.editForm.id,
            telNum: this.editForm.telNum,
            name: this.editForm.name,
            idCard: this.editForm.idCard
          }
        )

        if (res.code == '000000') {

           // 关闭对话框
        this.editDialogVisible = false
        // 刷新数据列表
        this.checkUserList()
        // 提示修改成功
        this.$message.success('更新用户信息成功！')
          
        }else{
          return this.$message.error('更新用户信息失败！')
        }

       
      })
    }
,
 async removeUserById(id){
    if(confirm("是否删除？")) {
    const re =await this.$http.post('/users/deleteUsers',{id:id});
    if(re.data.code=='000000'){
      this.$message.success('删除成功！');
      // 刷新数据列表
      this.checkUserList()
    }else{
      return this.$message.error('删除失败！')

    }


    }else{
      return false
    }




}
     

    
}}
</script>
<style  scoped>

 

</style>